<template>
	<a-dropdown
		:trigger 		='[event]'
		ghost 			= 'bottomCenter'
		v-model:visible = 'visible'
		v-if 			= 'data.length > 0'
	>
		<Button :label='label' :ghost='ghost' :loading='loading'>
			<span class='ease' style='margin-left:3px' :class="{'rotate-up ease':visible}"><CaretDownOutlined /></span>
		</Button>
		<template #overlay>
			<a-menu>
				<template v-for='(v,i) in data'>
					<a-menu-item v-if='v' :key='i' @click.stop='onSelect(v)'>{{setButtonLable(v)}}</a-menu-item>
				</template>
			</a-menu>
		</template>
	</a-dropdown>
</template>

<script>
	import { CaretDownOutlined } from '@ant-design/icons-vue'
	import { ref, onMounted, watch } from 'vue'
	import { Dropdown, Menu } from 'ant-design-vue'
	app.use(Dropdown)
	app.use(Menu)
	
	const Button = $.lazy(()=>import('@antd/button.vue'))
	
	export default{
		components:{ Button, CaretDownOutlined },
		props:{
			data 		: { type:Array, default:[] },
			perm 		: [Array,Function],
			event 		: { type:String, default:'click'},
			label 		: { type:String, default:'操作'},
			ghost 		: Boolean,
			loading		: Boolean
		},
		emits:{
			select:null
		},
		setup(props, ctx){
			const visible = ref()
			const data = ref(props.data)
			
			onMounted(() => {
				data.value = [ ...$fn.setPerm( data.value, props.perm ) ]
			})
			
			return {
				data,
				visible,
				onSelect: value => {
					ctx.emit('select', value)
				},
				setButtonLable:({ mode, label }) => {
					if(label){
						return label
					}else if(mode === 'mod'){
						return '编辑'
					}else if(mode === 'delModal'){
						return '删除'
					}
				}
			}
		}
	}
</script>